<template>
    <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
    <router-link to="/MainShow">维修管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>维修信息添加</el-breadcrumb-item>
 </el-breadcrumb>
</div>
       <div >
   <h2>新增维修记录</h2><br>
   <el-form
   ref="ruleFormRef"
   style="max-width: 600px"
   :model="form"
   :rules="rules"
   label-width="auto"
   class="demo-ruleForm"
   :size="formSize"
   status-icon
 >
   <table>
   <tr>
       <td>
   <el-form-item label="维修标题：" style="font-size: 20px;float: right;" prop="repairTitle">
           <el-input v-model="form.repairTitle" style="width: 300px;height: 40px;"
           placeholder="请输入维修标题：" clearable />
         </el-form-item>
      </td>
        </tr>
   
     <tr>
       <td>
         <el-form-item label="维修类型" style="font-size: 20px;float: right;" prop="repairType">
           <el-input v-model="form.repairType" style="width: 300px;height: 40px;"
           placeholder="请输入维修类型" clearable />
         </el-form-item>
       </td>
 </tr>
     <tr>
       <td>
         <el-form-item label="车牌号：" style="font-size: 20px;float: right;">
          <el-select v-model="form.licensePlateNumber" placeholder="车牌号" style="width: 300px;">
        <el-option v-for="item in line" :label="item" :value="item" />
     </el-select>
         </el-form-item>
       </td>
       </tr>
     <tr>
       <td>
         <el-form-item label="维修金额" style="font-size: 20px;float: right;" prop="repairAmount">
           <el-input v-model="form.repairAmount" style="width: 300px;height: 40px;"
           placeholder="请输入维修金额" clearable />
         </el-form-item>
       </td>
     </tr>
     <tr>
       <td>
         <el-form-item label="维修负责人" style="font-size: 20px;float: right;" prop="maintenanceManager">
           <el-input v-model="form.maintenanceManager" style="width: 300px;height: 40px;"
           placeholder="请输入维修负责人" clearable />
         </el-form-item>
       </td>
     </tr>
     <tr>
       <td>
         <el-form-item label="维修描述"   style="font-size: 20px;float: right;" prop="repairDescription">
            <el-input v-model="form.repairDescription" type="textarea" style="font-size: 20px;width: 300px;height: 80px;"></el-input>
         </el-form-item>
       </td>
     </tr>
     <tr>
       <td>
         <el-form-item label="维修日期"   style="font-size: 20px;float: right;" prop="repairDate">
           <el-date-picker v-model="form.repairDate" type="date"  value-format="YYYY-MM-DD"
           placeholder="请选择维修日期" clearable  style="width: 300px;height: 40px;"/>
         </el-form-item>
       </td>
     </tr>

   
     <tr>
       <td>
         <el-form-item label="备注"   style="font-size: 20px;float: right;" prop="notes">
            <el-input v-model="form.notes" type="textarea" style="font-size: 20px;width: 300px;height: 80px;"></el-input>
         </el-form-item>
       </td>
     </tr>
  
 </table>
   </el-form><br><br>
     <tr align="center">
       <el-button type="primary" @click="Approval" 
         style="width: 150px;height: 50px;">提交</el-button>
       <el-button  @click="Cancel" style="width: 150px;height: 50px;"
        >取消</el-button>
  </tr>
   </div>
</template>
   
<script setup lang='ts'>
    import axios  from 'axios';
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import type { UploadProps, UploadUserFile } from 'element-plus'
   import { ref, reactive, onMounted,watch } from 'vue'; 
   import { useRouter, useRoute } from 'vue-router';
   const router = useRouter();
   const form=reactive({
    repairTitle:'',
    repairType:'',
    licensePlateNumber:'',
    repairAmount:'',
    maintenanceManager:'',
    repairDescription:'',
    repairDate:'',
    notes:''
   })
onMounted(()=>{
   getLine()
})
//绑定车牌号/hread/api/ContractRead/BackfillTshowContract
const line=ref([])
const getLine=()=>{
   axios.get('/carread/api/Main/GetCar').then(res=>{
      console.log(res.data.data)
      line.value=res.data.data.map(o=>o.plateNumber)
      console.log(line.value)
   })
 }
//取消
const Cancel=()=>{
 router.push('/MainShow')
}
//提交
const Approval=()=>{
axios.post('/carwrite/api/Mainwrite/CreateMainRecord',form).then(res=>{
      if(res.data.data>0){
       ElMessage({
         message: '提交成功',
         type: 'success',
       })
       router.push('/MainShow')
      }else{
       ElMessage.error('提交失败')
      }
    })
      }

const rules = reactive<FormRules>({
    repairTitle: [
   { required: true, message: '维修标题不能为空', trigger: 'blur' },
 
],
repairType: [
   { required: true, message: '维修类型不能为空', trigger: 'blur' },
 
],
repairAmount: [
   { required: true, message: '维修金额不能为空', trigger: 'blur' },
 
],
maintenanceManager: [
   { required: true, message: '维修负责人不能为空', trigger: 'blur' },
 
],

repairDescription: [
   { required: true, message: '维修描述不能为空', trigger: 'blur' },
 
],
repairDate: [
    {
      required: true,
      message: '请选择维修日期',
      trigger: 'change',
    },
  ],
notes: [
   { required: true, message: '备注不能为空', trigger: 'blur' },
 
],
})

</script>